import React, { Component } from 'react';
import { Layout } from "antd";
import { Modal, Button, Input } from 'antd';
import './style.css'

import '../../utils/API'
import '../../utils/Network'

const {Header : AntdHeader} = Layout

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {  };
  }
  state = { visible: false };
  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  handleLogin = (e) => {
    let username = this.state.username;
    let passwd = this.state.passwd;

    const loginUrl = global.api.login;
    return global.network.post(loginUrl, {'username': username, 'password': passwd})
    .then(res => {
      window.sessionStorage.setItem('user.token', res.token);
      window.sessionStorage.setItem('user.user_id', res.user_id);

      // 关闭登陆窗口  
      this.setState({
        visible: false,
      });

      // 设置登陆按钮内部文字
      let loginButton = document.getElementById('loginButton');
      loginButton.innerHTML = '' + username;
      loginButton.bind( 'click', {} );
    }).catch(err => {

      /**
      Modal.error({
        content: '用户名密码不正确'
      })
       */
      
    }) 

  };

  render() {
    return (
      <div>
      <AntdHeader style={styles.container}>
        <div className="header-title">
            药学微生物智慧采集筛选分析信息系统
        </div>
        <Button type="primary" id="loginButton" className="header-title" onClick={this.showModal} style={{position:'absolute',fontSize:18,right:50,top:15}}>
         {window.sessionStorage.getItem('user.token') != null ? '欢迎使用' : '登陆'}
        </Button>
      </AntdHeader>
      <div>
        
        <Modal
          title="用户登录"
          visible={window.sessionStorage.getItem('user.token') != null ? false : true}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          style={{width:"100%"}}
        >
          <div className="aaa">  
            <div className="bbb">
              <p>      
                <span className="span" style={{paddingLeft: 0}}>
                    <Input ref="username" onChange={(e) => {
                      let val = e.target.value;
                      this.setState({
                        username: val
                      })
                    }} placeholder="请输入用户名" style={{ width: 460,height:45,borderRadius: 8,marginTop: 100 }} />
                </span>
              </p> 
              <p>
                <span className="span" style={{paddingLeft: 0}}>
                    <Input ref="passwd" type="password" onChange={(e) => {
                      let val = e.target.value;
                      this.setState({
                        passwd: val
                      })
                    }}  placeholder="请输入密码" style={{ width: 460,height:45,borderRadius: 8 }} />
                </span>
              </p>
              <p>
                <span className="span" style={{paddingLeft: 0}}>
                    <Button className="loginBtn" onClick={this.handleLogin} type="primary" style={{width:460,height:50,borderRadius: 8}}>登录</Button>
                </span>
              </p>
              <p>
                <span id="errorConsole" className="span" style={{paddingLeft: 0, color: 'red'}}></span>
              </p>
            </div>
          
          </div>

        </Modal>
      </div>
      </div>
    )
  }
}
const styles = {
  container: {
    backgroundColor: '#18a3fe',
    display: 'flex',
  },
}

export default Header;